import Vue from 'vue'
import Component from 'vue-class-component'
import './orderStyle.css'

@Component
export default class OrderFollowClass extends Vue {
  logistics = []
  orderId = ''
  wrapperHeight = 0

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 64
    this.orderId = this.$route.params.orderNo
    this.getData()
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  async getData() {
    try {
      const response = await this.$axios.post('/platform/v1/order/trace', {orderNo: this.orderId})
      if (response.status === 0) {
        this.logistics = response.data.traces[0].trace
        console.log(this.logistics)
      }
    } catch (e) {

    }
  }

  createItem () {
    const item = this.logistics.map((value, index) => {
      return <div class="logistics-list">
                {index === 0 ? <dl class="current">
                        <dt><i class="iconfont icon-Hook"></i></dt>
                        <dd style='font-size:0.8em'>{value.context}<p style='font-size:0.8em'>{value.ftime}</p></dd>
                    </dl>
                    : <dl>
                        <dt><i class="iconfont icon-Hook"></i></dt>
                        <dd style='font-size:0.8em'>{value.context}<p style='font-size:0.8em'>{value.ftime}</p></dd>
                    </dl>
                  }
                </div>
    })
    return item
  }

  render() {
    return (
            <div class='content' style={this.caculateHeight + ';overflow:auto;margin-top:64px;'}>
            <mt-header class='header' fixed title="订单追踪">
            <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
            </mt-header>
            {this.createItem()}
            </div>

    )
  }
}
